/** */

<template>
  <a-input
    :value="vModel"
    :allow-clear="allowClear"
    :placeholder="placeholder"
    @change="handleMyChange"
  />
</template>

<script>
import { Input } from 'ant-design-vue'

// 定义所有事件
const EVENTS = {
  myChange: 'myChange',
}

export default {
  name: 'myInput',
  components: {
    AInput: Input,
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: [String, Number],
    allowClear: Boolean,
    placeholder: String,
  },
  // events: {
  //   myChange: 'myChange',
  // },
  watch: {
    value: {
      immediate: true,
      handler(value) {
        console.log('watch value:', value)
        this.vModel = value
      },
    },
    // vModel: {
    //   handler(value) {
    //     this.$emit('change', value)
    //   },
    // },
  },
  data() {
    // const events = {
    //   myChange: 'myChange',
    // }
    return {
      vModel: undefined,
      // events,
    }
  },
  methods: {
    handleMyChange(e) {
      const value = e.target.value
      if (this.vModel) {
        // this.$emit('change', value)
      }
    },
  },
}
</script>

<style></style>
